<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>柱状图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .chart {
            width: 100%;
            height: 100%;
        }

    </style>
    <!--    <script src="./echarts.min.js"></script>-->

    <!-- 方式二 -->
    <script src=" https://cdn.staticfile.org/echarts/5.5.0/echarts.min.js"></script>
    <!-- 或者 方式三  -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script> -->
</head>

<body>
<div id="chart" class="chart"></div>

<script type="text/javascript">
        const fontSizeNum = 36;
        const chartBox = document.getElementById("chart");
        var Chart = echarts.init(chartBox);
        var option = {
         tooltip: {
    trigger: 'axis'
  },
 xAxis: {
    type: 'category',
    data: ['6:00', '7:00', '8:00', '9:00', '8:00', '9:00', '10:00']
  },
  yAxis: {type: 'value'},
  series: [ {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      color: '#57A6FC'
    },
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      color: '#57A6FC'
    },
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      color: '#57A6FC'
    }
    ]
        };

        function setOriginChartData(originChartData) {
            option=JSON.parse(originChartData)
             Chart.setOption(option);
      }

<!--        window.onload = function () {-->

<!--            Chart.setOption(option);-->
<!--        };-->

</script>
</body>

</html>